<template>
  <div style="height: 100%;">

    <el-row style="height: 100%;"
            class="content-item">
      <el-col :span="8"
              class="borderBox">
        <el-table :data="tabData"
                  class="table-header-gray"
                  highlight-current-row
                  ref="singleTable"
                  @current-change="handleCurrentChange"
                  style="width: 100%">
          <el-table-column property="name"
                           label="审批业务">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16"
              class="borderBox">
        <p>流程配置</p>
        <step :stepData="stepData"
              :handleAdd="handleAdd"
              :handleDelete="handleDelete"></step>

      </el-col>
    </el-row>
    <dialog-add-role :sure="sure"
                     :dialogForm="dialogForm"
                     :dialogShow="dialogShow"
                     @handleClose="handleClose"></dialog-add-role>
  </div>
</template>
<script>
import { _getSetting, _setSetting, _getflows } from '@api/systemManage'
import dialogAddRole from './dialog-addRole'
export default {
  data () {
    return {
      areaChecked: [],
      id: null,
      tabData: [],
      stepData: [],
      dialogShow: false,
      dialogForm: { roleName: '学校用户' }
    }
  },
  components: {
    dialogAddRole
  },
  methods: {
    sure () {
      if (!this.stepData.some(item => {
        return item.roleName === this.dialogForm.roleName
      })) {
        console.log(this.id)
        let body = []
        this.stepData.push({ roleName: this.dialogForm.roleName })
        this.stepData.forEach((item, index) => {
          body.push({
            flowId: this.id,
            roleName: item.roleName,
            step: index + 2
          })
        })
        _setSetting(this.id, body).then(res => {
          this.getSetting(this.id)
          this.handleClose()
        })
      } else {
        this.$message.error('不能添加重复角色')
      }
    },
    handleClose () {
      this.dialogShow = false
    },
    handleCurrentChange (val) {
      this.$refs.singleTable.setCurrentRow(val)
      this.getSetting(val.id)
      this.id = val.id
    },
    getflows () {
      _getflows().then(res => {
        this.tabData = res.data
        if (res.data.length) {
          this.handleCurrentChange(res.data[0])
        }
      })
    },
    getSetting (id) {
      _getSetting(id).then(res => {
        this.stepData = res.data
        this.stepData.shift()
      })
    },
    handleAdd (item, index) {
      this.dialogShow = true
    },
    handleDelete (item, index) {
      if (this.stepData.length <= 1) {
        _setSetting(this.id, []).then(res => {
          this.getSetting(this.id)
          this.handleClose()
        })
        // this.$message.error('不能全部删除')
      } else {
        this.$confirm('确定删除该角色吗？', '提示', { type: 'warning' }).then(res => {
          let body = []
          this.stepData.splice(index, 1)
          this.stepData.forEach((item, index) => {
            body.push({
              flowId: this.id,
              roleName: item.roleName,
              step: index + 2
            })
          })
          _setSetting(this.id, body).then(res => {
            this.getSetting(this.id)
            this.handleClose()
          })
        })
      }
    }
  },
  mounted () {
    this.getflows()
  }
}
</script>
<style lang="less" scoped>
.borderBox {
  border: 1px solid #cccccc;
  display: block;
  padding: 10px;
  height: 100%;
}
</style>
